<template>
  <view class="shop-list">
    <view v-if="shops.length === 0 && !loading" class="empty-state">
      <image src="/static/images/empty-search.png" mode="aspectFit" class="empty-image"></image>
      <text class="empty-text">暂无相关店铺</text>
    </view>
    
    <template v-else>
      <!-- 商店筛选条件 -->
      <view class="filter-bar">
        <view 
          v-for="(item, index) in filterOptions" 
          :key="index" 
          class="filter-item"
          :class="{ active: currentSortType === item.type }"
          @click="changeSort(item.type)"
        >
          <text>{{ item.name }}</text>
          <uni-icons v-if="item.type !== 'default'" :type="getSortIconType(item.type)" size="14"></uni-icons>
        </view>
      </view>
      
      <!-- 商店列表 -->
      <view class="shop-items">
        <shop-list-item 
          v-for="(shop, index) in shops" 
          :key="index" 
          :shop="shop"
        ></shop-list-item>
      </view>
      
      <!-- 加载更多组件 -->
      <uni-load-more :status="loadMoreStatus" :content-text="contentText"></uni-load-more>
    </template>
  </view>
</template>

<script>
import ShopListItem from './ShopListItem.vue';

export default {
  components: {
    ShopListItem
  },
  
  props: {
    shops: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    hasMore: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      filterOptions: [
        { name: '综合排序', type: 'default' },
        { name: '销量优先', type: 'sales' },
        { name: '评分优先', type: 'rating' },
        { name: '距离优先', type: 'distance' }
      ],
      currentSortType: 'default',
      contentText: {
        contentdown: '上拉显示更多',
        contentrefresh: '加载中...',
        contentnomore: '没有更多数据了'
      }
    };
  },
  
  computed: {
    loadMoreStatus() {
      if (this.loading) return 'loading';
      if (!this.hasMore) return 'noMore';
      return 'more';
    }
  },
  
  methods: {
    changeSort(type) {
      if (this.currentSortType === type) return;
      this.currentSortType = type;
      this.$emit('sort-change', type);
    },
    
    getSortIconType(type) {
      return this.currentSortType === type ? 'arrow-down' : 'arrow-down-filled';
    },
    
    loadMore() {
      if (this.loading || !this.hasMore) return;
      this.$emit('load-more');
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-list {
  background-color: #f5f5f5;
  min-height: 100%;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}

.filter-bar {
  display: flex;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eeeeee;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .filter-item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666666;
    margin-right: 40rpx;
    padding: 10rpx 0;
    
    &.active {
      color: #ff5500;
      font-weight: bold;
    }
    
    uni-icons {
      margin-left: 4rpx;
    }
  }
}

.shop-items {
  padding: 20rpx;
}
</style> 